<template>
    <div class="side-menu"> 
        <ul>
            <router-link tag="li" v-for="(l,index) in list" :to="l.uri">
                {{l.name}}
                <i v-bind:class="{'icon-home':index==0,'icon-edit':index==1,'icon-envelope':index==2,'icon-user':index==3}"></i>
            </router-link>
            </ul>
        </div>
</template>
<script>
    export default {
        data() {
            return {
                list: [{
                    name: "首页",
                    uri: "/home"
                }, {
                    name: "发表",
                    uri: "/Publish"
                }, {
                    name: "消息",
                    uri: "/News"
                }, {
                    name: "我的",
                    uri: "/User"
                }]
            }
        }
    }
</script>
<style scoped>
    .side-menu {
        width: 100%;
        height: 49px;
        font-size: 16px;
        line-height: 70px;
        background: white;
        position: fixed;
        bottom: 0;
        border-top: 1px solid #333;
        z-index: 100;
    }
    
    ul {
        display: flex;
        justify-content: flex-start;
        text-align: center;
    }
    
    ul li {
        width: 25%;
        position: relative;
        color: #000000;
    }
    
    ul li i {
        position: absolute;
        top: 5px;
        left: 1rem;
        font-size: 16px;
    }
    
    .is-active {
        color: indigo;
    }
</style>